<!--顶部栏-->
<template>
    <div class="goods_detail" ref="toolDiv" :style="setStyle" style="transition:left 0.3s ease"
         :class="{
          is_fixed:defaultTop > state.scrollScope
          }">
        <zh-card :body-style="{ padding: '5px', 'background-color': backgroundColor }" shadow="hover">
            <div style="display: flex; align-items: center; justify-content: space-between">
                <div :style="{ color: color }">
                    {{ extra }}
                </div>
                <div style="display: flex; align-items: center; justify-content:flex-end">
                    <slot></slot>
                </div>
            </div>
        </zh-card>
    </div>
<!--    占位div,防止触发吸顶时滚动条抖动  -->
    <div style="width: 100%;" v-show="defaultTop > state.scrollScope" :style="{height:state.toolDivHeight+'px'}"></div>
</template>

<script lang="ts" setup name="zh-header-toolbar">
import {computed} from "vue";
defineProps({
    extra: {
        type: [String, Object], //额外信息
        default: '操作栏',
    },
    backgroundColor: {
        type: [String], //背景颜色
        default: `var(--el-color-primary-light-9)`,
    },
    color: {
        type: [String], //额外信息文字颜色
        default: `var(--el-color-primary)`,
    },
});

const toolDiv = ref();
//获取当前页面的头部固定 是否保留Tagsview  主题样式
const {isTagsview, layout} = $store.theme;

const isFixedHeader = ref($store.theme.isFixedHeader);
//吸顶效果（不同主题变量值定义）
const defaultTop = ref(0)
const state = reactive({
    //滚动后触发吸顶的范围
    scrollScope : 15,
    //吸顶后top的数值
    top:0,
    //导航栏是否收起
    isCollapse:$store.theme.isCollapse,
    //工具栏的高度
    toolDivHeight:44
});
onMounted(() => {
    //数据初始化
    getTop();
    getScrollScope();
    //获取工具栏高度
    state.toolDivHeight = toolDiv.value.offsetHeight;
})

//计算滚动多少范围后触发吸顶 Header高度+15
function getScrollScope() {
    if(isFixedHeader.value) state.scrollScope=15;
    else if (isTagsview && layout !== 'classic') state.scrollScope=99;
    else state.scrollScope=65;
}

//计算top  吸顶后top样式
function getTop(){
    if(isFixedHeader.value){//固定Header时 计算Header高度
        if (isTagsview && layout !== 'classic') state.top=84;
        else state.top=50;
    }else state.top=0;
}

//吸顶后可变样式
const setStyle = computed(() => {
    let s = {top: state.top+'px', left: ''}
    if (layout === 'transverse') {
        s.left = '15px'
    } else if (layout === 'defaults' || layout === 'classic') {
        s.left = state.isCollapse ? '79px' : '225px'
    } else {
        s.left = state.isCollapse ? '149px' : '295px'
    }
    return s;
});


//吸顶效果（监听滚动条并赋值给主题变量值）
if(!isFixedHeader.value){
  if (layout === 'columns') {
    let columnsY: any = inject("columnsY")
    watch(columnsY, (val) => {
        defaultTop.value = Number(val)
    })
  }else if (layout === 'defaults') {
      let defaultY: any = inject("defaultsY")
      watch(defaultY, (val) => {
          defaultTop.value = Number(val)
      })
  }
}else{
  let mainY: any = inject("mainY")
  watch(mainY, (val) => {
    defaultTop.value = Number(val)
  })
}

//监听导航栏是否收起
watch($store.theme, (val) => {
    state.isCollapse = val.isCollapse
    isFixedHeader.value = val.isFixedHeader
    getTop();
    getScrollScope();
})
</script>

<style lang="scss" scoped>
.header-extra {
    color: var(--el-color-primary);
}

.is_fixed {
    position: fixed;
    z-index: 999;
    right: 15px;
}

</style>
